<template>
	<view class="myCase row">
		<van-tabs :active="active" color="#02BF88" sticky animated swipeable @change="onChange">
		  <van-tab title="待核实">
				<view style="padding: 0 32rpx;" v-if="dataList.length">
					<view class="list" v-for="item in dataList" :key="item.id">
						<view class="content" @click="fillIn(item.id)">
							<text class="c_title">{{ item.title }}</text>
							<text class="c_cont">{{ item.gmtCreate }}</text>
						</view>
					</view>
				</view>
				<view v-else class="noData">
					<view class="text">暂无案例</view>
				</view>
				 <view class="loading" v-show="isShowMore">没有更多数据了~</view>
			</van-tab>
		  <van-tab title="已核实">
				<view style="padding: 0 32rpx;" v-if="dataList.length">
					<view class="list" v-for="item in dataList" :key="item.id">
						<view class="content" @click="fillIn(item.id,{isAppraising: true})">
							<text class="c_title">{{ item.title }}</text>
							<text class="c_cont">{{ item.gmtCreate }}</text>
						</view>
						<view class="appraising" :class="item.status == 3 ? 'besidesColor':''">{{ item.status == 3 ? '上鉴定会' : '不上鉴定会' }}</view>
					</view>
				</view>
				<view v-else class="noData">
					<view class="text">暂无案例</view>
				</view>
				 <view class="loading" v-show="isShowMore">没有更多数据了~</view>
			</van-tab>
		  <van-tab title="待鉴定">
				<view style="padding: 0 32rpx;" v-if="dataList.length">
					<view class="list" v-for="item in dataList" :key="item.id">
						<view class="content" @click="fillIn(item.id)">
							<text class="c_title">{{ item.title }}</text>
							<text class="c_cont">{{ item.gmtCreate }}</text>
						</view>
						<view class="appraising">待鉴定</view>
					</view>
				</view>
				<view v-else class="noData">
					<view class="text">暂无案例</view>
				</view>
				 <view class="loading" v-show="isShowMore">没有更多数据了~</view>
			</van-tab>
			<van-tab title="已鉴定">
				<view style="padding: 0 32rpx;" v-if="dataList.length">
					<view class="list" v-for="(item,index) in dataList" :key="item.id">
						<view class="content" @click="fillIn(item.id, {isComment:true})">
							<text class="c_title">{{ item.title }}</text>
							<text class="c_cont">{{ item.gmtCreate }}</text>
						</view>
						<view class="appraising" :class="item.status == 10 ? 'besidesColor':''">{{ item.status == 10 ? '已发布' : '不发布' }}</view>
					</view>
				</view>
				<view v-else class="noData">
					<view class="text">暂无案例</view>
				</view>
				 <view class="loading" v-show="isShowMore">没有更多数据了~</view>
			</van-tab>
		</van-tabs>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
	import { ownList } from '@/api/case'
	import { fileById } from '@/api/common'
	import { auditList, getIsVerifyList, verifyList, finishedList } from '@/api/my'
	export default {
		name: 'myCase',
		data() {
			return {
				active: 0,
				pagination: {
					pageSize: 10,
					pageNum: 1
				},
				total: '0',
				dataList: [],
				dataValue: {
					ownerUserId: this.$storage.getItem('userInfo').user.userId,
					status: '1'
				},
				role: this.$storage.getItem('roleDataInfo').type
			}
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh() {
				//下拉的生命周期
			this.pagination.pageNum = 1;
			// setTimeout(() => {
			// 	if (this.active == 3) {
			// 		this.getFinishedList()
			// 	} else {
			// 		this.getList();
			// 	}
			// }, 200)
			setTimeout(() => {
				this.getList();
			}, 200)
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1300);
		},
		onReachBottom() {
			if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
				return
			}
			this.pagination.pageNum ++;
			this.getList('more');
			// if (this.active == 3) {
			// 	this.getFinishedList('more')
			// } else {
			// 	this.getList('more');
			// }
		},
		computed: {
			isShowMore() {
				if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total && this.dataList.length) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			//获取值
			getList(mode) {
				if (this.active == 0) {
					auditList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if(this.active == 1)  {
					getIsVerifyList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if(this.active == 2){
					verifyList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if (this.active == 3) {
					finishedList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				}
			},
			onChange(e) {
				this.active = e.detail.name;
				this.reset();
				// if (e.detail.name == 1) {
				// 	this.dataValue.status = '0'
				// } else if (e.detail.name == 2) {
				// 	this.dataValue.status = '10'
				// }else if (e.detail.name == 3) {
				// 	this.pagination.pageNum = 1;
				// 	this.getFinishedList()
				// 	return
				// }else {
				// 	this.dataValue.status = '1'
				// }
				// this.pagination.pageNum = 1;
				// setTimeout(() => {
				// 	this.getList();
				// }, 200)
			},
			reset() {
				this.dataList = [];
				this.pagination = {
					pageSize: 10,
					pageNum: 1
				};
				this.total = 0;
				// if(status == 10 && type == 3) {
					this.getList()
				// }
			},
			fillIn(val, params) {
				let route = `./detail?id=${val}`
				if (params && params.isAppraising) {
					route+=`&isAppraising=${params.isAppraising}`
				}
				if (params && params.isComment) {
					route+=`&isComment=${params.isComment}`
				}
				uni.navigateTo({
					url: route
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myCase {
		width: 100%;
		position: relative;
		background: #f5f5f5;
		min-height: 100vh;
		.list {
			padding: 24rpx 16rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20px;
			position: relative;
			.content {
				display: flex;
				flex-direction: column;
				.c_title {
					color: #333333;
					font-size: 32rpx;
				}
				.c_cont {
					color: #666666;
					font-size: 28rpx;
					margin-top: 16rpx;
				}
			}
			.appraising {
				position: absolute;
				right: 0;
				top: 0;
				width: 130rpx;
				height: 40rpx;
				background-color: #FBA517;
				line-height: 40rpx;
				text-align: center;
				border-radius: 0rpx 20rpx 0 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				&.besidesColor {
					background-color: #02BF88;
				}
			}
		}
		/deep/ .van-tabs__wrap {
			height: 80rpx;
			.van-tabs__scroll {
				margin: 0;
				height: 100%;
				.van-tabs__nav {
					height: 100%;
					border-color: #9BCDAF;
					.van-ellipsis {
						line-height: 80rpx;
					}
				}
			}
		}
	}
</style>
